<script setup lang="ts">
import dayjs from 'dayjs';
import { computed } from 'vue';
import { DepartmentClassApi } from '@/api/department-class';
import AuthBar from '@/components/authBar/index.vue';
import { DictKeyEnum } from '@/enums/dict.enums';
import { useRequest } from '@/hooks/useRequest';
import { useDictStore } from '@/store/dictStore';
import { buildAssetSource } from '@/utils';
import { currRoute, withQueryString } from '@/utils/router.utils';
import Steps from './components/steps.vue';
import { useDoctorInfo } from './hooks/useDoctorInfo';
import { useRegistrationProjectFee } from './hooks/useRegistrationProjectFee';

const { getDictLabel } = useDictStore();

const { query } = currRoute();

const { doctor } = useDoctorInfo();

const { totalAmount, feeItems } = useRegistrationProjectFee(doctor);

// 获取一级科室信息
const { data: departmentInfo } = useRequest(() => DepartmentClassApi.getParentDept(query.sectionId as unknown as number));

function handleConfirm() {
  uni.navigateTo({
    url: withQueryString('/pages/registration/registrationPayment', {
      doctorId: doctor.value?.doctorId,
      appointmentDateTime: query.appointmentDateTime,
      appointmentTimeId: query.appointmentTimeId,
      timePeriod: query.timePeriod
    })
  });
}

const buildDoctorCover = computed(() => {
  return doctor.value?.doctorImg || buildAssetSource('doctor-cover.png');
});
</script>

<template>
  <view class="confirm-appointment flex-col">
    <Steps :current="4" />
    <AuthBar />
    <view class="flex-1 overflow-auto px-48 pt-30">
      <!-- 挂号信息 -->
      <view class="appointment-info py-20 pl-32">
        <view class="appointment-info__item flex items-center py-26">
          <view class="appointment-item__cover flex-center">
            <image :src="buildAssetSource('section-manage.png')" class="h-61 w-61" />
          </view>
          <view class="appointment-item__content ml-25">
            <view class="appointment-content__title">
              {{ departmentInfo?.name }}
            </view>
            <view class="appointment-content__desc">
              {{ departmentInfo?.introduce }}
            </view>
          </view>
        </view>
        <view class="appointment-info__item flex py-26">
          <view class="appointment-item__cover flex-center">
            <image :src="buildDoctorCover" class="h-full w-full" />
          </view>
          <view class="appointment-item__content ml-25 w-0 flex-1">
            <view class="doctor-item__info flex items-center">
              <view class="doctor-item__name">
                {{ doctor?.doctorName }}
              </view>
              <view class="divider ml-14 mr-10" />
              <view class="doctor-item__title">
                {{ getDictLabel(doctor?.professionalTitle, DictKeyEnum.EMPLOYEE_TITLE) }}
              </view>
            </view>
            <view class="mt-10 flex items-center">
              <view class="doctor-item__room">
                {{ doctor?.sectionName }}
              </view>
              <view class="divider ml-14 mr-10" />
              <view class="flex items-center text-22 c-#707070">
                心血管疾病专家
              </view>
            </view>
            <view class="line-clamp-2 mb-20 mt-14 pr-30 text-24 c-#3D3D3D">
              {{ doctor?.personalProfile }}
            </view>
            <view v-if="false" class="flex items-center text-20 text-[var(--secondary-text-color)]">
              ⭐  5.0(好评率 98%)  <image :src="buildAssetSource('user.png')" class="ml-15 mr-10 h-17 w-17" /> 从业20年
            </view>
          </view>
        </view>
        <view class="appointment-info__item flex items-center py-26">
          <view class="appointment-item__cover flex-center">
            <image :src="buildAssetSource('time.png')" class="h-48 w-48" />
          </view>
          <view class="appointment-item__content ml-25">
            <view class="appointment-content__title">
              就诊时间
            </view>
            <view class="appointment-content__desc">
              {{ dayjs(Number(query.appointmentDateTime)).format('YYYY年MM月DD日dddd HH:mm') }}
            </view>
          </view>
        </view>
      </view>

      <!-- 费用信息 -->
      <view class="appointment-cost">
        <view class="appointment-cost__title">
          费用信息
        </view>
        <view class="appointment-cost__list">
          <view v-for="(item, index) in feeItems" :key="index" class="appointment-cost__item">
            <view class="appointment-cost__item-title">
              {{ item.title }}
            </view>
            <view class="appointment-cost__item-price">
              ¥{{ item.price }}
            </view>
          </view>
        </view>
        <view class="appointment-cost__total">
          <view class="appointment-cost__total-title">
            合计金额
          </view>
          <view class="appointment-cost__total-price">
            ¥{{ totalAmount }}
          </view>
        </view>
        <view class="mt-12 text-24 text-[var(--secondary-text-color)]">
          注：医保患者请在缴费时出示医保卡，实际支付金额以医保结算为准
        </view>
      </view>

      <view class="flex-center">
        <view class="confirm-btn">
          <wd-button block @click="handleConfirm">
            确认信息并前往缴费
          </wd-button>
        </view>
      </view>

      <view class="mb-60 mt-16 text-center text-24 text-[var(--secondary-text-color)]">
        点击"确认信息并前往缴费"，即表示您同意医院的预约服务条款和缴费说明
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '当日挂号',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.confirm-appointment {
  background-color: var(--bg-color);
  height: 100%;

  .appointment-info {
    background: #ffffff;
    border-radius: 20px;

    .appointment-info__item {
      .appointment-item__cover {
        width: 108px;
        height: 108px;
        border-radius: 50%;
        background: #e7f2ff;
        overflow: hidden;
      }

      .appointment-item__content {
        .appointment-content__title {
          font-size: 36px;
          font-weight: bold;

          color: var(--text-color);
        }

        .appointment-content__desc {
          font-size: 20px;
          color: #3d3d3d;
        }

        .divider {
          background: var(--bg-color);
          width: 4px;
          height: 22px;
        }

        .doctor-item__name {
          font-size: 36px;
          font-weight: bold;
          color: var(--text-color);
        }

        .doctor-item__title {
          font-size: 22px;
          color: #3b3b3b;
        }

        .doctor-item__room {
          background: #dfecff;
          border-radius: 100px;
          color: var(--primary);
          font-size: 16px;
          padding: 5px 13px;
        }
      }
      &:not(:last-child) {
        border-bottom: 1px solid #c6dafa;
      }
    }
  }

  .appointment-cost {
    background: #ffffff;
    border-radius: 20px;
    margin-top: 20px;
    padding: 50px 32px;
    .appointment-cost__title {
      font-size: 46px;
      font-weight: bold;

      color: var(--text-color);
    }
    .appointment-cost__list {
      border-bottom: 1px solid #c6dafa;
      padding-bottom: 48px;
      .appointment-cost__item {
        @apply flex justify-between items-center;
        font-size: 36px;
        color: #3d3d3d;
        margin-top: 50px;
        .appointment-cost__item-title {
          font-size: 32px;
          color: #3d3d3d;
        }
        .appointment-cost__item-price {
          font-size: 32px;
          font-weight: bold;

          color: var(--text-color);
        }
      }
    }

    .appointment-cost__total {
      @apply flex justify-between items-center;
      font-size: 36px;
      color: #3d3d3d;
      margin-top: 50px;
      .appointment-cost__total-title {
        font-size: 34px;
        font-weight: 500;
        color: var(--text-color);
        font-weight: bold;
      }
      .appointment-cost__total-price {
        font-size: 32px;
        font-weight: bold;

        color: var(--text-color);
      }
    }
  }

  .confirm-btn {
    width: 708px;
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    margin-top: 59px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
